<template>
	<view>
		<view style="width: 90%; margin: auto;">
			<!-- 轮播图 -->
			<view>
				<swiper class="swiper">
					<swiper-item v-for="(item, index) in bannerlist" :key="index">
						<navigator :url="item.path" class="swiper-item "><image class="swiper1-img" :src="item.pathimg"></image></navigator>
					</swiper-item>
				</swiper>
			</view>
			<!-- 轮播图 -->
			<!-- 科目列表 -->
			<navigator hover-class="none" :url="'./homeworklist?subject_name='+item.subject_name+'&groupid='+groupid+'&student_id='+student_id" v-for="(item,index) in subjectlist" :key="index">
				<view class="item">
					<i class="item-icon iconhomeworkfont" :class="item.icon" :style="item.background"></i>
					<view class="cont">
						<view class="name">{{item.subject_name}}</view>
						<view class="tip flex-x">
							<view class="tip-text">所有作业</view>
							<i class="tip-icon iconhomeworkfont iconfanhuixcx"></i>
						</view>
					</view>
				</view>
				<view class="shadow"></view>
			</navigator>
			<!-- 科目列表 -->
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bannerlist: [
				{
					path: '',
					pathimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F72%2F85%2F815bc165bd81787.jpg%21r850%2Ffw%2F800&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614329724&t=3a018ab34d2efb9cfe786447b4ccd2ce'
				}
			],
			subjectlist:[],
			groupid:'',
			student_id:''
		};
	},
	onLoad(e) {
		this.groupid =e.groupid;
		this.student_id=e.student_id;
		this.$wapi.apiPost(`api/v1/parent/homework/student/getSubject`,{student_id:this.student_id}).then(res => {
			if(res.data.code==200){
				let data = res.data.data;
				data.forEach((item,key)=>{
					let subject ={
						subject_name:item,
						icon:''
					};
					switch (item) {
						case '语文':
							subject.icon = 'iconyuwen'
							subject.background = 'background: linear-gradient(180deg, #FFEAA7 0%, #F2A626 100%);'
							break
						case '数学':
							subject.icon = 'iconshuxue'
							subject.background = 'background: linear-gradient(180deg, #8DEAD2 0%, #04B78A 100%);'
							break
						case '英语':
							subject.icon = 'iconyingyu'
							subject.background = 'background: linear-gradient(180deg, #8FC6FE 0%, #0080FF 100%);'
							break
						case '物理':
							subject.icon = 'iconwuli'
							subject.background = 'background: linear-gradient(180deg, #C2E9FB 0%, #A1C4FD 100%);'
							break
						case '化学':
							subject.icon = 'iconhuaxueyongpin'
							subject.background = 'background: linear-gradient(180deg, #7FFED8 0%, #09BDFE 100%);'
							break
						case '生物':
							subject.icon = 'iconshengwu'
							subject.background = 'background: linear-gradient(180deg, #FCC687 0%, #F286A0 100%);'
							break
						case '地理':
							subject.icon = 'icondili'
							subject.background = 'background: linear-gradient(180deg, #8FF379 0%, #1CBDB4 100%);'
							break
						case '历史':
							subject.icon = 'iconlishi'
							subject.background = 'background: linear-gradient(180deg, #B5B3FF 0%, #4540BB 100%);'
							break
						case '政治':
							subject.icon = 'iconzhengzhi'
							subject.background = 'background: linear-gradient(180deg, #FF95B7 0%, #EF2F6E 100%);'
							break
						case '思想品德':
							subject.icon = 'iconzhengzhi'
							subject.background = 'background: linear-gradient(180deg, #FF95B7 0%, #EF2F6E 100%);'
							break
						default:
							subject.icon = 'iconyuwen'
							subject.background = 'background: linear-gradient(180deg, #8DEAD2 0%, #04B78A 100%);'
							break
					}
					this.subjectlist.push(subject);
				})
			}
		});
	},
	methods: {}
};
</script>

<style lang="scss">
	page{
		background: #FAFAFA;
	}
.swiper {
	height: 320upx;
	border-radius: 5px;
	margin-top: 20upx;
}
.swiper-item {
	height: 100%;
}
.swiper1-img {
	width: 100%;
	height: 100%;
}
.item{
	height: 110upx;
	width: calc(100% - 30upx);
	margin-left: 30upx;
	background: #fff;
	display: flex;
	align-items: center;
	z-index: 999;
	border-radius: 10upx;
	margin-top: 20upx;
	.item-icon{
		position: absolute;
		left: 5%;
		width: 90upx;
		height: 90upx;
		background: linear-gradient(180deg, #FFEAA7 0%, #F2A626 100%);
		opacity: 20upx;
		border-radius: 10upx;
		text-align: center;
		line-height: 90upx;
		font-size: 56upx;
		color: #FFFFFF;
	}
	
	
	.cont{
		width: calc(100%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.name{
			margin-left: 75upx;
			color: #333333;
			font-size: 32upx;
		}
		.tip{
			.tip-text{
				color: #333333;
				font-size: 32upx;
			}
			.tip-icon{
				color: #CCCCCC;
				margin: 0 20upx 0 30upx;
			}
		}
	}
}
.shadow{
		margin: 0upx 60upx 0 50upx;
		width: calc(100% - 70upx);
		height: 10upx;
		background: linear-gradient(180deg, #C2E9FB 0%, #A1C4FD 100%);
		opacity: 0.12;
		border-radius: 0 0 20upx 20upx;
	}


</style>
